<template>
	<view class="box">
		<view class="item1">
			<view>
				<image :src="groundInfo.logo" style="width: 96rpx;height: 95rpx;"></image>
			</view>
			<view class="shop-info">
				<view class="name">{{groundInfo.shop_name}}</view>
				<view class="qianming">{{groundInfo.yh_introduce}}</view>
			</view>
		</view>
		<view class="item2">
			<view class="titlebg" style="position: relative;">
				<image src="../../static/images/market2.png" class="titlebgimg"></image>
				<view style="position: absolute;letter-spacing: 5rpx;">店铺基本信息</view>
			</view>
			<view>
				<view style="display: flex;">
					<view style="flex: 1;">
						<view class="info-xinxi">店名：{{groundInfo.shop_name}}</view>
						<view class="info-xinxi">联系电话：{{groundInfo.phone}}</view>
						<view class="info-xinxi">营业时间：{{business_times}}-{{endtime}}</view>
					</view>
					<view>
						<image :src="groundInfo.shop_images" style="width: 270rpx;height: 209rpx;"></image>
					</view>
				</view>
				<view class="info-xinxi">店铺地址：{{groundInfo.shop_address}}</view>
			</view>
			<view class="titlebg" style="position: relative;margin-top: 80rpx;">
				<image src="../../static/images/market2.png" class="titlebgimg"></image>
				<view style="position: absolute;letter-spacing: 5rpx;">平台介绍</view>
			</view>
			<view class="content">
				{{groundInfo.platform_introduce}}
			</view>
			<view class="titlebg" style="position: relative;margin-top: 80rpx;">
				<image src="../../static/images/market2.png" class="titlebgimg"></image>
				<view style="position: absolute;letter-spacing: 5rpx;">活动介绍</view>
			</view>
			<image style="height: 353rpx;width: 100%;" :src="groundInfo.image"></image>
			<view
				style="text-align: center;font-size: 48rpx;font-family: Source Han Sans CN;font-weight: 500;color: #4A9A73;line-height: 87rpx;">
				{{groundInfo.yh_name}}
			</view>
			<view
				style="text-align: center;font-size: 30rpx;font-family: Source Han Sans CN;font-weight: 500;color: #535353;line-height: 37rpx;">
				{{groundInfo.yh_introduce}}
			</view>
			<view
				style="text-align: center;font-size: 38rpx;font-family: Source Han Sans CN;font-weight: 500;color: #4A9A73;line-height: 87rpx;">
				申请领取</view>
			<view style="margin:0  100rpx;">
				<view>
					<u--input placeholder="输入手机号" border="surround" v-model="mobile" @change="change"></u--input>

					<view class="login-ipt flex align-center justify-between" style="padding-top: 20rpx;">
						<u--input placeholder="请输入验证码" v-model="captcha">
						</u--input>
						<view class="send-code">
							<u-toast ref="uToast"></u-toast>
							<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" changeText="倒计时x秒"
								@change="codeChange"></u-code>
							<u-button class="send-code" @tap="getCode">{{tips}}</u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="btn" @click="submit">
				立即领取充电时长
			</view>
		</view>
	</view>
</template>

<script>
	import {
		postNewsDetail,
		shopcategory,
		shoplist,
		ground,
		smsSend
	} from "../../api/home.js";
	import {
		url
	} from "../../utils/url.js";
	export default {
		data() {
			return {
				verificatMsg: "获取验证码",
				tips: "获取验证码",
				seconds: 60,
				detail: {},
				token: '',
				userInfo: {},
				shop_id: "",
				groundInfo: null
			}
		},
		onLoad(e) {
			this.shop_id = e.shop_id;
			this.ground_id = e.ground_id;
			this.init()
		},
		methods: {
			submit() {
				if (this.mobile == null || this.mobile == "") {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return
				}
				if (this.captcha == null || this.captcha == "") {
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
					return
				}
				var data = {
					mobile: this.mobile,
					captcha: this.captcha,
					ground_id: this.ground_id
				}
				mobilelogin(data).then(res => {
					console.log("mobilelogin", res);
					if (res.data.code == 1) {

						uni.setStorageSync('userInfo', res.data.data.userinfo);
						uni.setStorageSync('uid', res.data.data.userinfo.id);
						uni.setStorageSync('token', res.data.data.userinfo.token);

						var url = window.location.host;
						location.href = "https://" + url + "/#/";
					}
				})
			},
			async init() {
				let data = new Object();
				data.shop_id = this.shop_id + "";
				data.ground_id = this.ground_id;
				let res = await ground(data)
				console.log(res);
				if (res.data.code == 1) {
					this.groundInfo = res.data.data
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if (res.data.code == 401) {
						uni.setStorageSync('isType', '1')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/user/login'
							})
						}, 1200)
					}
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					if (this.mobile == null || this.mobile == "") {
						uni.showToast({
							title: "请输入手机号",
							icon: "none"
						})
						return
					}
					var data = {
						mobile: this.mobile,
						event: "mobilelogin"
					}
					smsSend(data).then(res => {
						console.log("mobilelogin", res);
						if (res.data.code == 1) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							uni.$u.toast(res.data.msg);
							uni.hideLoading();
						}
					})

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style>
	.send-code {
		/* 		width: 160rpx;
		height: 40rpx;
		background: #05BD03;
		border-radius: 6rpx;
		text-align: center;
		color: white;
		font-size: 20rpx;
		line-height: 40rpx; */

		width: 182rpx;
		height: 76rpx;
		background: #4A9A73;
		color: white;
		border-radius: 8rpx;
	}

	.u-input {
		border: 4rpx solid #4A9A73 !important;
	}

	.box {
		background-image: url('https://d-youpin.bigchun.com/assets/image/marketbg.png');
		height: 2861rpx;
		width: 750rpx;
		padding: 20rpx;


	}

	.btn {
		width: 486rpx;
		height: 72rpx;
		background: #4A9A73;
		box-shadow: 0px 5rpx 5rpx 0px rgba(30, 76, 54, 0.3);
		border-radius: 8rpx;
		margin: auto;
		margin-top: 50rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 72rpx;
	}

	.content {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #535353;
		letter-spacing: 3rpx;
		line-height: 46rpx;
	}

	.item1 {
		display: flex;
		margin: 40rpx 0;
	}

	.item1 .shop-info {
		margin-left: 20rpx;
	}

	.item1 .shop-info .name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 50rpx;
	}

	.item1 .shop-info .qianming {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 30rpx;
	}

	.titlebg {
		display: flex;
		width: 100%;
		justify-content: center;
		font-size: 45rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 45px;
	}

	.titlebgimg {
		width: 472rpx;
		height: 118rpx;
	}

	.item2 {
		background: #D0EFE2;
		border-radius: 30px;
		padding: 20rpx;
	}

	.info-xinxi {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #535353;
		line-height: 74rpx;
	}

	.item3 {}

	.item4 {}

	.item5 {}

	.item6 {}

	.item7 {}
</style>
